<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    商品名称
    <input type="text" v-model="item.name">
    商品价格
    <input type="number" min="0" v-model.number="item.price">
    购买数量
    <input type="number" min="1" v-model="item.num">
    <button @click="addCart">增加到购物车</button>
    <table class="table table-bordered table-hover table-condensed" style="max-width:600px;margin:0 auto">
      <tr>
        <th>
          商品名称
        </th>
        <th>
          商品价格
        </th>
        <th>购买数量</th>
        <th>
          小计
        </th>

        <th>
          操作
        </th>
      </tr>
      <tr v-for="(item, index) in items">
        <td>
          <input v-model="item.checked" @change="itemCheckedChange" type="checkbox">
          <span>{{item.name}}</span>
        </td>
        <td>
          ￥{{item.price}}
        </td>
        <td>
          <button @click="addNum(index)" class="btn btn-xs">+</button>
          <span>{{item.num}}</span>
          <button @click="reduceNum(index)" class="btn btn-xs">-</button>
        </td>
        <td>
          ￥ {{ (item.num * item.price).toFixed(2) }}
        </td>
        <td>
          <button @click="delItem(index)" class="btn btn-danger btn-sm">删除</button>
        </td>
      </tr>
      <tr v-if="!items.length">
        <td colspan="5" align="center">
          暂无商品
        </td>
      </tr>
      <tr>
        <td>合计:</td>
        <td colspan="4">
          全选：
          <input v-model="allChecked" @change="allCheckedChange" type="checkbox">
          总价格：
          ￥{{ total }}
        </td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        item: {
          name:'',
          num:1,
          price:0
        },
        // 总价格
        total: 0,
        // 是否全选
        allChecked: true,
        items: [
          {
            id: 1,
            name: '商品1',
            num: 1,
            price: 15,
            checked: true
          },
          {
            id: 2,
            name: '商品2',
            num: 1,
            price: 18,
            checked: true
          },
          {
            id: 3,
            name: '商品3',
            num: 1,
            price: 19.9,
            checked: true
          },
          {
            id: 4,
            name: '商品4',
            num: 1,
            price: 199.9,
            checked: true
          }
        ]
      },
      methods: {
        addCart () {
          // 添加购物车
          /* 
          浅拷贝  浅克隆
          */
          this.items.push({
            ...this.item,
            checked: true
          });
        },
        allCheckedChange(){
          // 切换全选状态
          console.log(this.allChecked);
          this.items.forEach(item=> { 
            item.checked =  this.allChecked
          });
          this.calcTotal();
        },
        itemCheckedChange() {
          // 切换商品选中状态
          this.calcTotal();
          /* 
          判断是否所有的商品都被选中
          是 全选 选中
          否 全选 取消选中
          */
          const allChecked = this.items.every(item => item.checked);
          this.allChecked = allChecked;
        },
        delItem(index) {
          // 删除购买商品
          if (confirm('您确认删除吗?')) {
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        addNum(index) {
          // 购买数量+1
          this.items[index].num++;
          this.calcTotal();
        },
        reduceNum(index) {
          // 购买数量-1
          this.items[index].num--;
          if (this.items[index].num <= 1) {
            this.items[index].num = 1;
          }
          this.calcTotal();
        },
        calcTotal() {
          /* 
          所有的 选中商品的
          单价*数量的 总合
          */

          const checkedItems = this.items.filter(item => item.checked);
          this.total = 0;
          checkedItems.forEach((item) => {
            this.total += item.price * item.num;
          })
          this.total = parseFloat(this.total.toFixed(2));
        }
      }
    })
    // 页面初始化 计算总价格
    vm.calcTotal();
    /* 
    引用类型值传递 传递的是地址
    var obj = {};
    var obj2 = obj;
    arr = []
    arr.push(obj)
    var obj3 = {
      a: obj
    }
    */
   
  </script>

</body>

</html>